<template>
    <div class="main-content bg" v-wechat-title="VueTitle">
        <div class="w-1200 clearfix">
            <div class="rank-head">
                <!-- <span class="avatar"><img src="../../../assets/images/my.jpg"></span> -->
                <span class="avatar">
                    <!-- <template v-if="userInfo.avatar && userInfo.avatar.indexOf('base64') != -1">
                        <img :src="userInfo.avatar" alt="">
                    </template>
                    <template v-else>
                      <img :src="imgRequest + userInfo.avatar" alt="">
                    </template> -->
                    <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" alt="">
                    <img v-else src="@/assets/images/head_default.png" >
                </span>
                <p class="info">
                    我的积分：<em>{{user_score}}</em>
                    <span v-if="next_status != 1">距升级还差：<em>{{differ_score}}</em></span>
                    <span v-else>已达到最高等级</span>
                </p>
                <p class="progress-bar"><span data-v-1b2a2afc="" class="progress-inner" ref="refWidthScore"></span></p>
                <!-- <Tooltip :content="user_score" placement="bottom" class="progress-bar">
                    <span class="progress-inner" ref="refWidthScore"></span>
                </Tooltip> -->
            </div>

            <div class="rank-content">
                <h1><img src="../../../assets/images/biaoti2.png" alt="等级规则介绍"></h1>
                
                <h2 class="public-title">等级规则</h2>
                <div class="level-rule clearfix">
                    
                    <Table border :columns="honorColumns" :data="honor" :loading="isShow"></Table>
                    
                </div>

                <h2 class="public-title" style="margin-top:30px;">升级宝典</h2>
                <div class="level-upgrade">
                    <dl>
                        <dt><img src="../../../assets/images/upgrade_1.png"></dt>
                        <dd>
                            <h5>充值升级</h5>
                            <p>有效充值<span>{{rechargeMoney}}</span>元宝<span>+{{rechargeScore}}</span>积分</p>
                        </dd>
                        <router-link to="/topUpCenter/recharge" class="ivu-btn ivu-btn-pink ivu-btn-circle">去充值</router-link>
                        <a href="javascript:void(0);" @click="goToRecharge" class="ivu-btn ivu-btn-pink ivu-btn-circle">去充值</a>
                    </dl>
                    <dl>
                        <dt><img src="../../../assets/images/upgrade_2.png"></dt>
                        <dd>
                            <h5>投注升级</h5>
                            <p>有效投注<span>{{bettingMoney}}</span>元宝<span>+{{bettingScore}}</span>积分</p>
                        </dd>
                        <router-link to="/" class="ivu-btn ivu-btn-pink ivu-btn-circle">去投注</router-link>
                    </dl>
                    <dl>
                        <dt><img src="../../../assets/images/upgrade_3.png"></dt>
                        <dd>
                            <h5>中奖升级</h5>
                            <p>中奖<span>{{winningMoney}}</span>元宝<span>+{{winningScore}}</span>积分</p>
                        </dd>
                        <router-link to="/" class="ivu-btn ivu-btn-pink ivu-btn-circle">去投注</router-link>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
export default {
    data() {
        return {
            VueTitle: "等级规则", //页面标题
            
            user_score:0,
            differ_score:0,
            isShow:true,
            honor:[],
            bettingMoney:0,
            bettingScore:0,
            rechargeMoney:0,
            rechargeScore:0,
            winningMoney:0,
            winningScore:0,
            next_status:0,
            honorColumns: [
                {
                    title: '荣誉积分',
                    key: 'score',
                    align: "center",
                },
                {
                    title: '荣誉等级',
                    key: 'name',
                    align: "center",
                },
                {
                    title: '荣誉特权',
                    key: 'grade',
                    align: "center",
                    className:"Honor-privilege",
                    render: function (h, params) {
                        return h('div', [
                            h('img',{
                                domProps:{
                                    src:params.row.grade
                                }
                            }),
                            h('span', '颁发' + params.row.name + '徽章')
                        ],);
                    },
                },
                {
                    title: '备注',
                    key: 'sort',
                    align: "center",
                }
            ],
        };
    },
    created() {
        var vm = this;
        vm._getHonor();
        if (vm.userInfo.username) {
            setTimeout(function() {
                vm.nextScore();
            }, 20)
        }
    },
    mounted() {
        
    },
    computed: {
        ...mapGetters(["userInfo"])
    },
    methods: {
        emptyAvatarUrl() { //清空头像路径
            this.userInfo.avatar = ''
        },
        goToRecharge() {
			if (!JSON.parse(localStorage.getItem("isUser"))) {
                this.$Message.warning('游客暂无权限，请先注册会员');
			} else {
				this.$router.push({path:'/topUpCenter/recharge'});
			}
        },
        _getHonor() { //获取等级积分数据
            var params = {
                token: localStorage.getItem("token")
            };
            // params.token = localStorage.getItem("token");
            this.isShow = true;
            this.$http.post(this.urlRequest + "?m=api&c=user&a=getHonor", params).then(res => {
                this.isShow = false;
                if (res.data.status == 0) {
                    //充值金额
                    this.bettingMoney = res.data.plus_score.betting.money;
                    //充值积分
                    this.bettingScore = res.data.plus_score.betting.score;
                    //投注金额
                    this.rechargeMoney = res.data.plus_score.recharge.money;
                    //投注积分
                    this.rechargeScore = res.data.plus_score.recharge.score;
                    //投注金额
                    this.winningMoney = res.data.plus_score.winning.money;
                    //投注积分
                    this.winningScore = res.data.plus_score.winning.score;
                    
                    this.honor = res.data.honor;
                    for (var i=0; i<this.honor.length; i++) {
                        this.honor[i].sort = "自动升级";
                        this.honor[i].grade = this.imgRequest + '/up_files/honor/sbadge0' + this.honor[i].grade + '.png';
                    }
                } else {
                    this.$Message.error(res.data.ret_msg);
                }
            }).catch(error => {
                this.isShow = false;
                this.$Message.error("数据请求超时");
            });
        },
        nextScore() {
            var score = Number(this.userInfo.honor.score);//上一级的标准
            var next_score =Number(this.userInfo.honor.next_score) ;//下一级的标准
            // this.user_score = 400; //当前积分测试数据
            this.user_score = Number(this.userInfo.honor.user_score);//当前积分
            this.differ_score = next_score - this.user_score;//距离升级差的积分
            this.next_status = this.userInfo.honor.next_status; //是否到最高级别
            // this.widthScore =50; //当前百分比测试数据
            if(this.next_status == 1){
                this.widthScore = 100;
            } else {
                this.widthScore = Math.ceil((this.user_score - score) / (next_score - score) *100);
            }
            this.$refs.refWidthScore.style.width = this.widthScore +'%';
        },
    },
    watch: {
        userInfo(obj) {
			var vm = this;
			if (obj.username) {
				setTimeout(function() {
					vm.nextScore();
				}, 20)
			}
		},
    }
};
</script>
<style scoped>
.level-upgrade dl .ivu-btn-pink.disabled,
.level-upgrade dl .ivu-btn-pink.disabled:hover {
	color: #c5c8ce;
	background: #f7f7f7;
	border-color: #dcdee2;
}
</style>


// WEBPACK FOOTER //
// src/components/PersonalCenter/vipLevel/vipLevel.vue